<!--
 * @Author: zhouyan
 * @Date: 2023-07-10 15:03:36
 * @LastEditors: zhouyan
 * @LastEditTime: 2023-07-14 19:36:16
 * @FilePath: /owe-ui/html/about.html
 * @Description:
 *
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../js/swiper/swiper-bundle.min.css"/>

    <style>
        .section {
            text-align: center;
            margin-top: 60px;
        }

        .section .title {
            color: #191F2D;
            font-size: 36px;
            font-weight: 500;
        }

        .section .sub-title {
            font-size: 12px;
            font-weight: 400;
            color: #9E9E9E;
            letter-spacing: 3px;
            margin-bottom: 60px;
        }

        .section .content {

        }

        .section .content .title {
            font-size: 24px;
            font-weight: 500;
            color: #191F2D;
            text-align: left;
            margin-bottom: 25px;
        }

        .section .content .desc {
            font-size: 16px;
            font-weight: 400;
            color: #374459;
            text-align: left;
            margin-bottom: 50px;
            line-height: 36px;

        }

        .section .content .desc img {
            width: 10px;
            height: 10px;
            margin-top: 14px;
            margin-right: 5px;
        }

        .section .content .left {
            width: 60%;
        }

        .company-intro.section .content .left {
            background-image: url(./../static/about/intro-left-bg.png);
            background-repeat: no-repeat;
            background-position: right bottom;
        }

        @media (max-width: 767.98px) {

            .section .content .left {
                width: 100%;
            }

            .nav-box {
                display: none;
            }
        }

        .company-address.section .content .desc {
            line-height: 20px;
        }

        .company-address.section .content .desc .line {
            width: 60px;
            height: 2px;
            background: linear-gradient(201deg, #336CFF 0%, #1778FF 100%);
            margin-bottom: 40px;
        }

        hr {
            color: #DDE2EE;
        }

        .team-photos-container {
            width: 100%;
        }

        .section.team-photos {
            width: 100%;
            height: 746px;
            background-image: url(./../static/about/team-photos-bg.png);
            background-repeat: no-repeat;
        }

        .section.team-photos .title {
            color: #fff;
            padding-top: 80px;
        }

        /* 加入我们 */
        .recruit-section {
            text-align: left;
            background: #FFFFFF;
            box-shadow: 0px 12px 60px 0px rgba(7, 16, 80, 0.08);
            border-radius: 20px 20px 20px 20px;
            padding: 40px 60px;
        }

        .recruit-section .job-title {
            margin-bottom: 20px;
        }

        .recruit-section .job-title .job-name {
            font-size: 24px;
            font-weight: 500;
            color: #191F2D;
        }

        .recruit-section .job-subtitle {
            font-size: 18px;
            font-weight: 500;
            color: #191F2D;
            margin-bottom: 16px;
        }

        .recruit-section .job-content {
            font-size: 16px;
            color: #374459;
            line-height: 28px;
        }

        .recruit-section.active {
            background-image: url(./../static/about/recruit-bg.png);
            background-repeat: no-repeat;
            background-position: right bottom;
        }

        .job-other {
            display: none;
        }

        .showBtn {
            cursor: pointer;
            /* 用border值来控制箭头粗细 */
            border: 3px solid black;
            /* 上、右、下、左  四个边框的宽度 */
            border-width: 0px 2px 2px 0px;

            display: inline-block;
            /* padding值控制箭头大小 */
            padding: 5px;
            transform: rotate(45deg);
        }

        .showBtn.up {
            transform: rotate(-135deg);
        }

        .nav-box {
            position: absolute;
            margin-top: 10px;
            height: 244px;
            list-style: none;
            font-size: 16px;
            border-right: 1px solid #DDE2EE;
            padding-right: 10px;
            background-color: #fff;

        }

        .nav-box-fixed {
            position: fixed;
            top: 100px;
        }

        .nav-box a {
            text-decoration: none;
            color: #374459;

        }

        .nav-box li {
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #DDE2EE;
            width: 180px;
            text-align: center;
        }

        .nav-box .active::after {
            content: " ";
            height: 60px;
            width: 2px;
            background-color: #2A6FFF;
            position: absolute;
            right: -2px;
        }

        .active a {
            color: #2A6FFF;
            font-weight: 600;

        }

    </style>
    <style>
        /* swiper */
        /* 外层容器 */
        .swiper {
            width: 100%;
            height: 482px;
        }

        .swiper-wrapper {
            width: 100%;
            height: 482px;
        }

        /* 轮播项 */
        .swiper .swiper-slide {
            width: 700px;
            height: 440px;
            font-size: 32px;
            font-weight: 500;
            color: #ffffff;
            /* 文字垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }

        /*去掉默认样式*/
        .swiper-button-prev:after {
            display: none;
        }

        .swiper-button-next:after {
            display: none;
        }

        /*自定义样式*/
        .swiper-button-prev {
            width: 60px;
            height: 60px;
            background: url('../static/about/left-arrow.png');
            left: 0;
        }

        .swiper-button-next {
            width: 60px;
            height: 60px;
            background: url('../static/about/right-arrow.png');
            right: 0;
        }
    </style>
</head>

<body>
<header>
    <div class="header-content container-md d-flex  justify-content-between align-items-center">
        <div class="logo-wrap d-flex  align-items-center">
            <img style="margin-right: 10px;" width="40" src="../static/head/logo.png"/>
            银链食安
        </div>
        <div class="menu-wrap d-flex">
            <div class="menu" data-index="1">
                首页
            </div>
            <div class="menu">
                最新动态
            </div>
            <div class="menu active">
                关于我们
            </div>
        </div>
    </div>


</header>
<div class="top">
    <img class="img-fluid" src="./../static/about/top.png" alt="">
</div>
<ul class="nav-box">
    <li class="los1 active"><a href="#s1">公司简介</a></li>
    <li class="los2"><a href="#s2">公司地址</a></li>
    <li class="los3"><a href="#s3">公司团队</a></li>
    <li class="los4"><a href="#s4">加入我们</a></li>
</ul>
<div class="container-md">
    <div class="section company-intro" id="s1">
        <div class="title">
            公司简介
        </div>
        <div class="sub-title">
            COMPANY INTRO
        </div>
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center content">
            <div class="left">
                <div class="title">
                    海南银链食安科技有限公司
                </div>
                <div class="desc d-flex">
                    <img src="./../static/about/dot.png" alt="">
                    <div>
                        海南银链食安科技有限公司是一家专注于食品安全领域的科技创新型企业。公司秉持“共建食安城市，共享美好生活”的企业理念，致力于打造服务于千万商家的全链路食品安全管理体系，让中国人吃的更安心。
                    </div>

                </div>
                <div class="desc d-flex">
                    <img src="./../static/about/dot.png" alt="">
                    <div>
                        公司核心产品“城市食品安全监管系统”，在充分体现社会共治、信用监管政策精神的同时，也为商家提供了专业的移动支付收款、营销管理软件、广告等多种服务，全方位扶持了小微餐饮商户的发展。是一套监管好用、商户想用、百姓爱用的餐饮信用监管系统。
                        未来，公司将一如既往地注重软硬件研发管理、产品质量和过程改进，以更优质的创新技术和服务体系，为百姓、商户、和食安城市建设创造更多价值。
                    </div>

                </div>
            </div>
            <div class="right">
                <img class="img-fluid" src="./../static/about/intro-right-bg.png" alt="">
            </div>

        </div>
    </div>
</div>

<div class="container-md">
    <div class="section company-address" id="s2">
        <div class="title">
            公司地址
        </div>
        <div class="sub-title">
            COMPANY ADDRESS
        </div>
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center content">
            <div class="left">
                <div class="title">
                    银链食安上海总部
                </div>
                <div class="desc d-flex flex-column">
                    <div class="line">

                    </div>
                    <div class="address">
                        <p>
                            地址：上海市闵行区吴中路1819号318室
                        </p>
                        <p>
                            邮编：021 5902 6018
                        </p>
                        <p>
                            电话：021 5902 6018
                        </p>
                        <p>
                            咨询邮箱：ylsa@ylaxm.com
                        </p>
                    </div>

                </div>
            </div>
            <div class="right">
                <img class="img-fluid" src="./../static/about/intro-right-bg.png" alt="">

            </div>

        </div>
        <hr/>
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center content">
            <div class="left">
                <div class="title">
                    云南运营中心
                </div>
                <div class="desc d-flex flex-column">
                    <div class="line">

                    </div>
                    <div class="address">
                        <p>
                            地址：上海市闵行区吴中路1819号318室
                        </p>
                        <p>
                            邮编：021 5902 6018
                        </p>
                        <p>
                            电话：021 5902 6018
                        </p>
                        <p>
                            咨询邮箱：ylsa@ylaxm.com
                        </p>
                    </div>

                </div>
            </div>
            <div class="right">
                <img class="img-fluid" src="./../static/about/intro-right-bg.png" alt="">

            </div>

        </div>
    </div>

</div>

<div class="team-photos-container">
    <div class="section team-photos" id="s3">
        <div class="title">
            团队照片
        </div>
        <div class="sub-title">
            TEAM PHOTOS
        </div>
        <div class="container-md">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide-1">
                        <img src="https://iph.href.lu/700x440?fg=666666&bg=cccccc" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-2">
                        <img src="https://iph.href.lu/700x440?fg=666666&bg=eeeeee" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-3">
                        <img src="https://iph.href.lu/700x440?fg=666666&bg=ffffff" alt="">
                    </div>
                </div>
                <!-- <div class="button-prev">
                    <img src="./../static/about/left-arrrow.png" alt="">
                </div>
                    <div class="button-next">
                    <img src="./../static/about/right-arrrow.png" alt="">
                </div> -->
                <div class="swiper-button-prev">
                    <img src="./../static/about/left-arrrow.png" alt="">
                </div>
                <div class="swiper-button-next">
                    <img src="./../static/about/right-arrrow.png" alt="">

                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-md">
    <div class="section company-recruit" id="s4">
        <div class="title">
            加入我们
        </div>
        <div class="sub-title">
            JOIN US
        </div>
        <div class="recruit-section">
            <div class="job-title d-flex justify-content-between align-items-center">
                <div class="job-name">
                    互联网高级运营
                </div>
                <div class="showBtn">

                </div>
            </div>
            <div class="job-content">
                <p>
                    1、负责新媒体账号的独立运营及方向定位，有较强的营销感，网感、学习力、有成熟的自媒体账号运营经验。
                </p>
                <p>
                    2、负责新媒体内容运营及推广（如抖音、快手、视频号、微博等），打造垂直领域内容。

                </p>
                <p>
                    3、挖掘用户痛点、需求点，能很好的把营销文案、数据分析、专家特色有效结合，从而提出有建设性意见，调整内容让想及
                </p>


            </div>
            <div class="job-other">
                <div class="job-subtitle">
                    岗位要求
                </div>
                <div class="job-content">
                    <p>
                        1、有新媒体经验者或中文、新闻、传媒、设计、电子商务等相关专业优先;
                    </p>
                    <p>
                        2、对自媒体行业感兴趣，有网络推广经验者优先录用；

                    </p>
                    <p>
                        3、有较强的文字功底、做图能力以及学习能力、思考能力；
                    </p>
                    <p>
                        4、热衷于新媒体事物,并有自己的领悟和理解;具备新媒体引流方面的丰富的经验，熟悉面对各类引流问题。
                    </p>
                    <p>
                        5、责任心强、踏实诚恳。
                    </p>


                </div>
                <div class="job-subtitle">
                    福利待遇
                </div>
                <div class="job-content">
                    <p>
                        1.薪资范围8-10k+，具体面谈

                    </p>
                    <p>
                        2.每月不定期团队聚餐 上班时间：9-6，不加班，法定节假日正常休息

                    </p>
                    <p>
                        3.室内工作，写字楼办公环境，工作氛围好 欢迎有意向者可私聊。
                    </p>

                </div>
            </div>


        </div>
    </div>
</div>
<footer>
    <div class="container-md d-flex flex-column flex-md-row justify-content-between">
        <div class="footer-left d-flex flex-column flex-md-row ">
            <div class="company-info">
                <div class="company-name footer-light d-flex align-items-center">
                    <img width="23" style="margin-right: 10px;" src="./../static/index/logo-2.png" alt="">
                    <span>
                        海南银链食安科技有限公司
                    </span>
                </div>
                <div class="item">
                    运营中心地址：上海市闵行区吴中路1819号318室
                </div>
                <div class="item">
                    电话：021 5902 6018
                </div>
                <div class="item">
                    咨询邮箱：ylsa@ylaxm.com
                </div>
                <div class="icon-wrap">
                    <img style="margin-right: 10px;" src="https://iph.href.lu/30x30?fg=666666&bg=cccccc" alt="">
                    <img src="https://iph.href.lu/30x30?fg=666666&bg=cccccc" alt="">
                </div>
            </div>
            <div class="web-info-wrap d-flex justify-content-center">
                <div class="web-info">
                    <div class="footer-light">关于我们</div>
                    <div class="item">公司咨询</div>
                    <div>加入我们</div>
                </div>
            </div>

        </div>
        <div class="footer-right d-flex">
            <div class="qrcode-wrap" style="margin-right: 40px">
                <img src="https://iph.href.lu/120x120?fg=666666&bg=cccccc" alt="">
                <div> 扫一扫了解更多</div>
            </div>
            <div class="qrcode-wrap">
                <img src="https://iph.href.lu/120x120?fg=666666&bg=cccccc" alt="">
                <div> 扫一扫了解更多</div>
            </div>
        </div>
    </div>

    <div class="copyright-wrap">
        <div>
            © Copyrights 2020-2023 海南银链食安科技有限公司 丨 沪ICP备202399999号
        </div>
        <div>
            沪公安网备 100010001010号
        </div>
    </div>
</footer>

<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/rem.js"></script>
<script src="../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<script src="../js/swiper/swiper-bundle.min.js"></script>

<script>
    const swiper = new Swiper('.swiper', {
        initialSlide: Math.floor(3 / 2), //默认第几个在中心位置显示，总数量中间的一个，计算
        autoplay: false,
        // 容器能够显示的slide数量，可以用来调节中间slide占比大小（为了达到设计图的尺寸），
        // slide不能固定宽度，会影响滑动效果，所以这里用比例调节
        slidesPerView: "auto", // 每个slide的宽度：外层容器 1310 / slidesPerView = 387
        // 当前active的slide居中-最前面的大图
        centeredSlides: true,
        effect: "creative",
        loop: true,
        grabCursor: true,
        creativeEffect: {
            prev: {
                translate: [-140, 0, 0], // 偏移量
                scale: 0.85, // 缩放量
                shadow: true, // 是否加阴影
                opacity: 0.8, // 是否加阴影
            },
            next: {
                translate: [140, 0, 0],
                scale: 0.85,
                shadow: true,
                opacity: 0.8, // 是否加阴影

            },
            limitProgress: 2, // 显示五个堆叠的最重要的这个属性，后面依次以前面属性等比配置
            shadowPerProgress: true, //是否等比配置透明度
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    // 监听改变事件
    swiper.on('slideChange', (e) => {
        console.log(e.realIndex);
    });

</script>
<script>
    // 切换职位信息隐藏与显示
    $(".showBtn").click(function () {
        $(this).parent().parent().find('.job-other').slideToggle();
        $(this).toggleClass('up');
        $(this).parent().parent().toggleClass('active')
    });
</script>
<script>
    $(function () {
        $(window).scroll(function () {
            //获取全局的滚动条的高度
            var wst = $(window).scrollTop() //获取滚动条的垂直位置

            // console.log("滚动条的高度为" + wst)
            var len = 5;//声明的数量比a标签的个数多1
            for (i = 1; i < len; i++) { //遍历滚动条
                var next = i + 1;
                // 获取元素到顶部的距离
                var itemOffsetTop = $("#s" + i).offset().top - 220;  //offset().top获取当前元素到顶部的偏移量.
                //  console.log(itemOffsetTop)
                if (i === (len - 1)) {                //当最后一位的元素高度大于滚动条时，才给滚动条加个500的高度
                    var condition = itemOffsetTop <= wst + 500; //元素小于等于滚动条高度时
                } else {  //否则
                    // 获取下一个元素的高度到顶部的偏移量
                    var itemNextOffsetTop = $("#s" + next).offset().top - 220;
                    //当前元素小于等于滚动条的高度，并且下一个元素大于等于滚动条的高度
                    var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
                }
                if (condition) { //判断
                    $('.nav-box li').removeClass("active"); //给元素移除样式
                    $(".nav-box .los" + i).addClass("active"); //给选定的元素添加样式
                }
            }
            if (wst > 700) {
                $('.nav-box').addClass("nav-box-fixed"); //给元素移除样式

            } else {
                $('.nav-box').removeClass("nav-box-fixed"); //给元素移除样式

            }
            console.log(wst)
        })
    });
    //添加点击事件
    $(".nav-box li a").click(function (e) {
        //取消a标签锚点的默认事件
        e.preventDefault();
        e.returnValue = false; //iE的情况下。
        // 全局添加滚动条的动画           获取当前元素的href属性值到顶部的位置偏移量，时间为1秒
        $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top - 80)}, 0);
    })
</script>
</body>

</html>
